
$(function(){
    $.ajax({
        type: 'get',
        url: '/admin/category/getAllCategories',
        success(res) {
            // console.log(res)
            if (res.code === 200) {
                let html = template('template', res.data);
                // console.log(html);
                $('tbody').html(html)
            }
        }
    })
    $('.tubiao-container').on('click', function () {
        $('.tubiao-select').toggle();
    })
    // 给图标按钮添加点击事件
    $('.tubiao-select').on('click', 'i', function () {
        // $(this).attr('class');获取当前点击元素的class属性
        //$('.cruurent>i').attr('class') 获取要被替换元素的class属性
        $('.cruurent>i').attr('class', $(this).attr('class'));
    });
    // 给提示框添加点击事件
    $('.modal-footer').on('click', function () {
        $('#modelId').hide();
    })

    // 添加数据

    $('#btn').on('click', function () {
        let nameval = $('#name').val();
        let slugval = $('#slug').val();
        if (nameval.trim() === '') {
            $('#modal-msg').text('用户名不能为空');
            $('#modelId').modal();
            return
        }
        if (slugval.trim() === '') {
            $('#modal-msg').text('slug不能为空');
            $('#modelId').modal();
            return
        }
        let data = {
            name: nameval,
            slug: slugval,
            classname: $('.cruurent>i').attr('class').substring(2)
        }
        // console.log(data);
        $.ajax({
            type: 'post',
            url: '/admin/category/addNewCategoy',
            data,
            success(res) {
                if (res.code === 200) {
                    $('#modal-msg').text('新增成功');
                    $('#modelId').modal();
                    if (res.data) {
                        let html = `<tr data-id=${res.data.id}>
                        <td class="text-center"><input type="checkbox"></td>
                        <td>${res.data.name}</td>
                        <td>${res.data.slug}</td>
                        <td><i class="fa ${res.data.classname}"></i></td>
                        <td class="text-center">
                            <a href="javascript:;" class="btn btn-info btn-xs">编辑</a>
                            <a href="javascript:;" class="btn btn-danger btn-xs" >删除</a>
                        </td>
                        </tr>`;
                        //  console.log(html);   
                        $('tbody').append(html);
                        
                    }
                } else {
                    $('#modal-msg').text('新增失败');
                    $('#modelId').modal();
                    return
                }
            }
        })
    })
    
    // 删除数据
    $('tbody').on('click', '.del', function () {
        id = $(this).parents('tr').attr('data-id');
        // console.log(id);
        $.ajax({
            type: 'get',
            url: '/admin/category/deleteCategoiesById',
            data: {id},
            success: (res) => {
                // console.log(res)
                if (res.code == 200) {
                    // console.log($('.regain').attr('class'))
                    $(this).attr('class', $('.regain').attr('class'));
                    $(this).text('恢复');
                }
            }
        })
    })
    // 点击恢复按钮
    $('tbody').on('click', '.regain',function(){
        id = $(this).parents('tr').attr('data-id');
        $.ajax({
            type: 'get',
            url: '/admin/category/deleteCategoiesById',
            data: {
                id
            },
            success: (res) => {
                // console.log(res)
                if (res.code == 200) {
                    // console.log($('.regain').attr('class'))
                    $(this).attr('class', $('.del').attr('class'));
                    $(this).text('删除');
                }
            }
        })
    })
    // 修改数据
    // 点击修改按钮添加变成修改获取点击修改的那条数据显示在页面
    let id = null;
    let oldTr=null;
    $('tbody').on('click', '.edit', function () {
        oldTr = $(this).parents('tr');
        id = oldTr.attr('data-id');
        // console.log(id);
        // console.log( $('.add-categories').attr('hidden'))
        $.ajax({
            type:'get',
            url: '/admin/category/getCategoryByid',
            data:{id},
            success:function(res){
                if(res.code==200){
                $('#name').val(res.data.name);
                $('#slug').val(res.data.slug);
                $('.cruurent>i').attr('class','fa '+res.data.classname);
                    $('.add-categories').attr('hidden', true);
                    $('.edit-categories').attr('hidden', false);
                }
            }
        })
    })
    // 点击完成按钮修改完成
    $('#finish').on('click',function () {
        if ($('#name').val().trim()===''){
             $('#modal-msg').text('名称不能为空');
             $('#modelId').modal();
             return
        }
        if($('#slug').val().trim()===''){
            $('#modal-msg').text('别名不能为空');
            $('#modelId').modal();
            return
        }
        let data={
            name: $('#name').val(),
            slug: $('#slug').val(),
            classname: $('.cruurent>i').attr('class').substring(2),
            id
        }
        // console.log(data);
        $.ajax({
            type:'post',
            url: '/admin/category/editCategoryById',
            data,
            success(res){
                if(res.code !=200) return;
                let html = `<tr data-id="${data.id}">
                <td class="text-center"><input type="checkbox"></td>
                <td>${data.name}</td>
                <td>${data.slug}</td>
                <td><i class="fa ${data.classname}"></i></td>
                <td class="text-center">
                    <a href="javascript:;" class="edit btn btn-info btn-xs">编辑</a>
                    <a href="javascript:;" class="del btn btn-danger btn-xs">删除</a>
                </td>
                </tr>`
                oldTr.before(html);
                oldTr.remove();
                // 触发点击取消按钮事件
                $('#exit').trigger('click');
            }
        })
    })

    // 点击取消按钮恢复添加按钮
    $('#exit').on('click',function(){
         $('#name').val('');
         $('#slug').val('');
         $('.cruurent>i').attr('class', 'fa fa-glass');
         $('.add-categories').attr('hidden', false).next().attr('hidden', true);
    })
})
